import React, { Component } from 'react'
import lodash from 'lodash'
import axios from 'axios'
import './classname.css'

export default class componentName extends Component {
  constructor(props){
    super(props); 
    this.handleChange=lodash.debounce(this.handleChange,500)
  }
  state={
    val:'',
    arr:[],
    selected:true
  }

  handleChange=value=>{
    axios.get('api/list').then((res)=>{
      console.log(res.data);
      this.setState({
        arr:res.data.data,
        selected:false
      })
    })
  }



  render() {
    let {val,arr,selected}=this.state;
    console.log(this.state)
    return (
      <div className="wrapper">
          <div className="control">
            <input type="text" value={val}  onChange={(e)=>{
              
                this.setState({
                  val:e.target.value
                })
                this.handleChange(e.target.value)
            
            }} />
          </div>
          <div  className={selected?'hidden':'list is-hoverable'}>
            {arr && arr.length>0 && arr.map((v,i)=>{
              return (<div key={i} className="list-item" onClick={()=>{
                console.log(v);
                this.setState({selected:true,val:v})
              }} >{v}</div>)
            })}
           </div>
      </div>
    )
  }
}
